<template>
    <view class="content">
        <van-popup position="bottom" @click-overlay="closePopup" :show="showNotesPopup" round z-index=104
            custom-style="width: 100%;background:#ffffff;overflow: hidden; height:50% ">
            <view class="popup-content" >
                <view class="popup-main">
                    <view style="display: flex; justify-content: space-between;">
                        <view class="popupTitle"> {{title}}</view>
                        <van-icon name="cross" color="#FFFFFF" size="15" @click="closePopup" />
                    </view>
                    <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y :lower-threshold="80"  show-scrollbar="false">
                        <view class="modal-content">
                            <!-- <view class="item">
                            <van-icon type="date" size="20"></van-icon>
                            <view>有效期</view>
                            <view>购买后{{productTimeConfig.dayNum}}天有效</view>
                        </view> -->
                            <view class="item">
                                <view style="display: flex; align-items: center;">
                                    <!-- <van-icon name="clock" size="20"></van-icon> -->
                                    <view>有效期</view>
                                </view>
                                <view v-if="productTimeConfig.useDateType == 'day'">购买后{{ productTimeConfig.dayNum }}天有效
                                </view>
                                <view v-if="productTimeConfig.useDateType == 'dateRange'">
                                    购买后{{ productTimeConfig.startDate }}-{{ productTimeConfig.endDate }}有效</view>
                            </view>
                            <view class="item">
                                <view style="display: flex; align-items: center;"> <view>不可用日期</view> </view>
                                <view v-if="productTimeConfig.notDateType == 'part_date'"> {{ formattedDates || '所有日期均可用' }}</view>
                                <view v-else>所有日期均可用</view>
                            </view>
                            <view class="item">
                                <van-icon type="date" size="20"></van-icon>
                                <view>每日可用时间段</view>
                                <view>{{ productTimeConfig.dayStartTime }} ~ {{ productTimeConfig.dayEndTime }}</view>
                            </view>
                            <view class="item">
                                <van-icon type="date" size="20"></van-icon>
                                <view>预约规则</view>
                                <view>最大预约天数{{ productTimeConfig.maxOrderDay }}天 <span style="margin-left: 10rpx;margin-right: 10rpx;"> ·</span>
                                    需提前{{ productTimeConfig.minOrderHour }}分钟预约</view>
                            </view>
                            <view class="item">
                                <van-icon type="date" size="20"></van-icon>
                                <view>其它规则</view>
                                <view> <rich-text :nodes="productTimeConfig.remark"></rich-text></view>
                            </view>

                            <!-- 其他项目类似，依次添加 -->
                        </view>
                    </scroll-view>
                    <van-toast id="van-toast" />
                </view>

            </view>
        </van-popup>
    </view>
</template>

<script>
import Toast from '@/wxcomponents/vant/toast/toast'

export default {
    props: {
        showNotesPopup: {
            type: Boolean,
            default: () => false
        },
       
        productTimeConfig:{
            type: Object,
            default: () => ({})
        }
    },
    data () {
        return {
            curS:0,
            curSName:'',
            date: '',
            showMark: true, // 标记
            title: '购买须知',
            option: {},
            url: '',
            stepperValue:1,
            houseList:[
                // {
                // name:'王涛员',
                // tel:'1523623254',
                // house:'金鑫·滨湖一号3号楼1单元201',
                // isDefault:true
                // },
                // {
                //     name:'王涛员',
                //     tel:'1523623254',
                //     house:'金鑫·滨湖一号3号楼1单元201',
                //     isDefault:false
                // },
            ],
            userName:'王涛员',
            userTel:'1523623254',
            checkAll: false, // 标记是否全选
            checked: [], // 全选
            selectedRowKeys: [], // 已选择的数据的id
            selectedRows: [], // 已选择的数据
            inactiveIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/notChecked1126.png',
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',
            disabledIcon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/disabledIcon.png',
            
            // popupHeight:'300',
            radio:1,
            addressId:'',// 选中的地址id

        }
    },
    computed: {
        parsedNotDate() {
            try {
                // 添加空值处理和默认值
                const jsonStr = this.productTimeConfig.notDateValue || '{"weekDay":[],"festival":[],"date":[]}';
                return JSON.parse(jsonStr);
            } catch (e) {
                console.error('日期解析错误:', e);
                return { weekDay: [], festival: [], date: [] };
            }
        },
        formattedDates() {
            const weekDayMap = ['日', '一', '二', '三', '四', '五', '六'];
            const festivalMap = {
                new_year: '元旦',
                labor_day: '劳动节',
                national_day: '国庆节',
                spring_festival: '春节',
                NEW_YEAR:'元旦',  //元旦
                LUNAR_NEW_YEAR:'春节',  //春节
                QING_MING:'清明节',  //清明节
                LABOR_DAY:'劳动节',   // 劳动节
                MID_AUTUMN:'端午节',  //端午节
                AUTHENTIC_MID_AUTUMN:'中秋节',  //中秋节
                NATIONAL_DAY:'国庆节',  //国庆节
            }
            
            let displayText = [];
            
            // 处理周限制
            if (this.parsedNotDate.weekDay?.length) {
                const days = this.parsedNotDate.weekDay.map(d => `周${weekDayMap[d]}`);
                displayText.push(` ${days.join('、')}`)
                //  displayText.push(`每周 ${days.join('、')}`)
            }
            
            // 处理节日
            if (this.parsedNotDate.festival?.length) {
                const festivals = this.parsedNotDate.festival.map(f => festivalMap[f] || f);
                displayText.push(`节日 ${festivals.join('、')}`);
            }
            
            // 处理具体日期
            if (this.parsedNotDate.date?.length) {
                const uniqueDates = [...new Set(this.parsedNotDate.date)];
                displayText.push(`具体日期 ${uniqueDates.join('、')}`);
            }
            
            return displayText.join('  ·  ');
        }
    },

  watch:{
    productTimeConfig: {
          immediate: true, // 这句重要
          handler(v) {
              console.log(v, 'productTimeConfig')
              
          },
      },
  },
    onLoad () { },
    onReady () {
    },

    methods: {
       
        // 关闭弹窗
        closePopup () {
            console.log('关闭 关闭关闭---------')
            this.$emit('closeSpecsPopup')
        },
       

  },

}
</script>
<style lang="scss" scoped>

::v-deep .van-button__text {
    // display: inline-block;
    display: flex !important;
    flex-direction: column !important;
}
// 最外层
.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: -2;
    scrollbar-width: none;
    /* 针对Firefox */
}

// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}
// 提示框
.popup-content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding:24px;
    font-size: 12px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;


    .popup-main {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        // height:calc(100% - (env(safe-area-inset-bottom)));
        // padding-bottom: calc(0 + env(safe-area-inset-bottom));
    }


    .popupTitle {
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
    }
}
.modal-content {
  margin-top: 20px;
}

.modal-content .item {
//   display: flex;
//   align-items: center;
  margin-bottom: 10px;
}
// .modal-content .item icon {
//   margin-right: 10px;
// }
</style>

